<template>
  <div>
    <!-- 编辑推荐 -->
    <div class="m-homeremd">
      <h2 class="remd_tl">编辑推荐</h2>
      <div class="remd_songs">
        <ul>
          <!-- <li>
                      <img src="http://p2.music.126.net/tDKlBZAFVNwNPWGpAp7nMw==/109951168407869513.jpg?imageView=1&type=webp&thumbnail=246x0" alt="">
                      <div class="info">信息介绍</div>
                      <div class="num">99.9万</div>
          </li>-->
        <!-- 
            点击编辑推荐列表 ----跳转到对应的歌曲列表--需要接受参数id 
            功能：跳转界面 -- vue--跳转路由 
            跳转路由：
                1. 标签导航 router-link
                2. 编程式导航
                    $router.push() 

         -->
          <!-- <li v-for="ele in musicArr" :key="ele.id">
           <router-link :to='"/music-list/"+ele.id' >
                <img :src="ele.picUrl" alt />
                <div class="info">{{ele.name}}</div>
                <div class="num">{{ele.playCount | numStatus }}</div>
           </router-link>
          </li> -->

           <li v-for="ele in musicArr" :key="ele.id" @click="tiao(ele.id)">
                <img :src="ele.picUrl" alt />
                <div class="info">{{ele.name}}</div>
                <div class="num">{{ele.playCount | numStatus }}</div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 最新音乐 -->
    <div class="m-homeremd">
      <h2 class="remd_tl">最新音乐</h2>
      <ul class="list">
        <!-- <li>
          <div class="music_info">
            <div class="name">革命</div>
            <div class="authors">作者-xx</div>
          </div>
          <div class="play">
            <span></span>
          </div>
        </li>-->

        <li v-for="ele in listArr" :key="ele.id">
          <div class="music_info">
            <div class="name">{{ ele.name }}</div>
            <div class="authors">
              <!-- 作者可能不止一个：后台返回数组--遍历-{{ele.song.artists[0].name}} -->
              <span v-for="item in ele.song.artists" :key="item.id">{{item.name}}</span>
              -{{ele.song.album.name}}
            </div>
          </div>
          <div class="play">
            <span></span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import api from "../../api";
export default {
  data() {
    return {
      musicArr: [], //编辑推荐容器
      listArr: [] // 最新音乐列表容器
    };
  },
  methods:{

      //点击编辑推荐--跳转音乐列表界面
      tiao(id){
          this.$router.push({
              path:'/music-list/'+id
          })
      }
  },
  created() {
    //获取编辑推荐--------------------------------------------
    api.getMusic().then(res => {
      console.log("编辑推荐-----", res.data.result);
      this.musicArr = res.data.result;
    });
    //获取最新音乐-----------------------------------------------
    api.getNewMusic().then(res => {
      console.log("最新音乐-------", res.data.result);
      this.listArr = res.data.result;
    });
  },
  //过滤器---处理播放量展示状态
  filters: {
    numStatus: function(val) {
      //val >10000 万  > 100000000 亿  保留一位小数
      var n = 0;
      if (val >= 100000000) {
        console.log("-----------亿----");
        n = (val / 100000000).toFixed(1) + "亿";
      } else if (val >= 10000) {
        n = (val / 10000).toFixed(1) + "万";
      } else {
        n = val;
      }
      return n;
    }
  }
};
</script>

<style scoped lang='less'>
.m-homeremd {
  margin-top: 0.3rem;
}
.remd_tl {
  position: relative;
  padding-left: 0.1rem;
  margin-bottom: 0.14rem;
  font-size: 0.34rem;
  height: 0.4rem;
  line-height: 0.4rem;
  font-weight: 400;
  &::after {
    content: " ";
    position: absolute;
    left: 0;
    top: 0.06rem;
    width: 2px;
    height: 0.32rem;
    background-color: #d33a31;
  }
}
.remd_songs {
  ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    li {
      width: 33%;
      height: 3.2rem;
      // background: pink;
      margin-bottom: 0.1rem;
      position: relative;
      .num {
        position: absolute;
        right: 0.1rem;
        top: 0.1rem;
        color: #fff;
        font-size: 12px;
        background-image: url("");
        background-repeat: no-repeat;
        padding-left: 0.3rem;
        background-size: 0.26rem auto;
      }
      .info {
        padding: 0.04rem 0.06rem 0;
        font-size: 13px;
        color: #333;
        display: -webkit-box; //将盒子转换为弹性盒子
        -webkit-box-orient: vertical; //文本显示方式，默认水平
        -webkit-line-clamp: 2; //设置显示多少行
        overflow: hidden;
      }
    }
    img {
      width: 2.46rem;
      height: 2.46rem;
    }
  }
}

// 最新音乐
.list {
  li {
    display: flex;
    margin-left: 0.2rem;
    height: 1.1rem;
    padding: 0.2rem 0;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
    .music_info {
        width: 6.4rem;
      .name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-break: normal;
        font-size: 0.34rem;
        color: #333;
      }
      .authors {
        font-size: 0.24rem;
        color: #666;
        padding-top: 0.04rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-break: normal;
        span {
          position: relative;
          padding-right: 0.1rem;
          padding-left: 0.02rem;
          &::after {
            content: "/";
            position: absolute;
            right: -2px;
            top: 1px;
          }
          &:last-child {
            padding-right: 0;
          }
          &:last-child::after {
            content: "";
          }
        }
      }
    }
    .play {
      width: 0.84rem;
      display: flex;
      align-items: center;
      span {
        width: 0.44rem;
        height: 0.44rem;
        display: block;
        background: url("../../assets/images/index_icon_2x.png") no-repeat;
        background-size: 3.32rem 1.94rem;
        background-position: -0.48rem 0;
        margin: 0 auto;
      }
    }
  }
}
</style>